<template>
  <div class="app-container">
    <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" />
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary">重置</el-button>
    </div>
    <generate-table ref="generateTable" :data="jsonData1" :remote="remoteFuncs" :value="editData">
      <!--自定义新增编辑页面内容-->
      <!--<template slot="table_dialog" slot-scope="scope">-->
      <!--<generate-form :ref="scope.form" :data="jsonData" :remote="remoteFuncs" :value="scope.data"/>-->
      <!--</template>-->
    </generate-table>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  name: 'CreateFromSetname',
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      jsonData: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '操作类型', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'caozuoleixing' }, 'key': '1540360980000_20860', 'model': 'select_1540360980000_20860', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '账号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540361009000_43153' }, 'key': '1540361009000_43153', 'model': 'input_1540361009000_43153', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540360958000_22968' }, 'key': '1540360958000_22968', 'model': 'grid_1540360958000_22968', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '账户名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540361012000_7654' }, 'key': '1540361012000_7654', 'model': 'input_1540361012000_7654', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '币种', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'bizhong' }, 'key': '1540360982000_9163', 'model': 'select_1540360982000_9163', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540360961000_47589' }, 'key': '1540360961000_47589', 'model': 'grid_1540360961000_47589', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '协定留存金额', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540361014000_80767' }, 'key': '1540361014000_80767', 'model': 'input_1540361014000_80767', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'date', 'name': '生效日期', 'icon': 'regular/calendar-alt', 'options': { 'defaultValue': '', 'readonly': false, 'disabled': false, 'editable': true, 'clearable': true, 'placeholder': '', 'startPlaceholder': '', 'endPlaceholder': '', 'type': 'date', 'format': 'yyyy-MM-dd', 'timestamp': false, 'required': false, 'width': '100%', 'remoteFunc': 'func_1540361002000_86709' }, 'key': '1540361002000_86709', 'model': 'date_1540361002000_86709', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540360962000_64791' }, 'key': '1540360962000_64791', 'model': 'grid_1540360962000_64791', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'date', 'name': '失效日期', 'icon': 'regular/calendar-alt', 'options': { 'defaultValue': '', 'readonly': false, 'disabled': false, 'editable': true, 'clearable': true, 'placeholder': '', 'startPlaceholder': '', 'endPlaceholder': '', 'type': 'date', 'format': 'yyyy-MM-dd', 'timestamp': false, 'required': false, 'width': '100%', 'remoteFunc': 'func_1540361005000_93062' }, 'key': '1540361005000_93062', 'model': 'date_1540361005000_93062', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '签约到期自动续约标志', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'qianyuedaoqizidongxuyuebiaozhi' }, 'key': '1540360990000_17732', 'model': 'select_1540360990000_17732', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540360964000_60991' }, 'key': '1540360964000_60991', 'model': 'grid_1540360964000_60991', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '利率代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540361104000_48517' }, 'key': '1540361104000_48517', 'model': 'input_1540361104000_48517', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540360966000_25668' }, 'key': '1540360966000_25668', 'model': 'grid_1540360966000_25668', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }, 'table': { 'showRemove': false, 'showIndexCol': false, 'showEdit': false, 'showExport': false, 'showAdd': false, 'stripe': true, 'border': true }},
      jsonData1: { 'list': [{ 'type': 'input', 'name': '利率编号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540361274000_49771' }, 'key': '1540361274000_49771', 'model': 'input_1540361274000_49771', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }, { 'type': 'input', 'name': '利率名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540361278000_41152' }, 'key': '1540361278000_41152', 'model': 'input_1540361278000_41152', 'rules': [] }, { 'type': 'input', 'name': '基准利率', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540361287000_26766' }, 'key': '1540361287000_26766', 'model': 'input_1540361287000_26766', 'rules': [] }, { 'type': 'select', 'name': '利率浮动类型', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'lilvfudongleixing' }, 'key': '1540361289000_15282', 'model': 'select_1540361289000_15282', 'rules': [] }, { 'type': 'input', 'name': '利率浮动值', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540361297000_65923' }, 'key': '1540361297000_65923', 'model': 'input_1540361297000_65923', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }, { 'type': 'input', 'name': '实际利率', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540361299000_21922' }, 'key': '1540361299000_21922', 'model': 'input_1540361299000_21922', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }, 'table': { 'showRemove': false, 'showIndexCol': false, 'showEdit': false, 'showExport': false, 'showAdd': false, 'stripe': true, 'border': true }},
      editData: {},
      values: {},
      remoteFuncs: {
        caozuoleixing(resolve) {
          //  操作类型 select_1540360980000_20860
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('操作类型').then(response => { resolve(response.data) })
        },

        bizhong(resolve) {
          // 币种 select_1540360982000_9163
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('币种').then(response => { resolve(response.data) })
        },

        qianyuedaoqizidongxuyuebiaozhi(resolve) {
          // 签约到期自动续约标志 select_1540360990000_17732
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('签约到期自动续约标志').then(response => { resolve(response.data) })
        },
        lilvfudongleixing(resolve) {
          // 利率浮动类型 select_1540361289000_15282
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('利率浮动类型').then(response => { resolve(response.data) })
        }
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
